<template>
	<view class="container">
		<view class="user">
			<!-- #ifdef MP-WEIXIN -->
			<view class="left">
				<!-- 如果能获取存储的登录信息就数据库的昵称 -->
				<view class="nickname" v-if="JSON.stringify(business) !== '{}'">
					{{business.nickname ? business.nickname : business.mobile_text}}
				</view>

				<!-- 如果没有获取到就会显示微信昵称 -->
				<open-data v-else type="userNickName" class="nickname"></open-data>
			</view>
			<view class="right">
				<view class="avatar xcx">
					<u-avatar :src="business.avatar_text" size="90" v-if="JSON.stringify(business) !== '{}'"></u-avatar>

					<!-- 如果没有获取到就会显示微信头像 -->
					<open-data type="userAvatarUrl" v-else></open-data>
				</view>
			</view>
			<!-- #endif -->

			<!-- H5 -->
			<!--  #ifdef H5 || APP-PLUS-->
			<view class="left">
				<view class="nickname" v-if="JSON.stringify(business) !== '{}'">
					{{business.nickname}}
				</view>
				<view class="nickname" v-else>
					请选登陆
				</view>
				<view class="email" v-if="JSON.stringify(business) !== '{}'">
					{{business.email}}
				</view>
			</view>
			<view class="right">
				<view class="avatar">
					<u-avatar :src="business.avatar_text" size="90" v-if="JSON.stringify(business) != '{}'"></u-avatar>
					<u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
				</view>
			</view>
			<!-- #endif -->
		</view>

		<view class="menu" v-if="JSON.stringify(business) !== '{}'">
			<view class="item" hover-class="checkActive" @click="ToProduct">
				<view class="title">产品防伪管理</view>
				<u-icon name="arrow-right"></u-icon>
			</view>

			<!--  #ifdef MP-WEIXIN -->
			<view class="item" hover-class="checkActive" @click="OnUnbinding">
				<view class="title">解除绑定账号</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
			<!-- #endif -->

			<view class="item" hover-class="checkActive" @click="OnLogout">
				<view class="title">退出账号</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="actions">
			<!-- #ifdef MP-WEIXIN -->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" icon="weixin-circle-fill" @click="OnLogin">微信一键登陆</u-button>
			</view>
			<!-- #endif -->

			<!--  #ifdef H5 || APP-PLUS-->
			<view class="login" v-if="JSON.stringify(business) === '{}'">
				<u-button type="primary" @click="toLogin">登陆帐号</u-button>
			</view>
			<!-- #endif -->
		</view>
		<!-- 信息提示 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 退出确认框 -->
		<u-modal :show="ShowLogout" :content='ContentLogout' :showCancelButton="true" @cancel="ShowLogout = false"
			@confirm="ConfirmLogout"></u-modal>
		<!-- 解绑帐号 -->
		<u-modal :show="ShowUnbind" :content='ContentUnbind' :showCancelButton="true" @cancel="ShowUnbind = false"
			@confirm="ConfirmUnbind"></u-modal>
	</view>
</template>
<script>
	export default {
		data()
		{
			return {
				business: {},
				ShowLogout: false,
				ContentLogout: '确认是否退出登陆?',
				ShowUnbind: false,
				ContentUnbind: '确认是否解除绑定账号?'
			}
		},
		onShow()
		{
			this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}
		},
		methods: {
			OnLogin()
			{
				uni.login(
				{
					provider: 'weixin', //使用微信登录
					success: async (res) => {
						let code = res.code ?? '';
						if (!code)
						{
							this.$refs.uToast.show(
							{
								type: 'error',
								icon: false,
								message: '临时凭证获取失败'
							})
						}

						let result = await this.$u.api.WxLogin({
							code: code
						})

						//判断是否有action这个选项，判断是否授权登陆成功未绑定状态
						let action = result.data.action ?? '';
						let openid = result.data.openid ?? '';

						if (result.code == 1)
						{
							this.$refs.uToast.show(
							{
								type: 'success',
								message: result.msg,
								complete: () => {
									if (action == 'bind')
									{
										uni.$u.route({
											url: 'pages/business/bind',
											params:{
												openid: openid
											}
										})
									}
									else
									{
										//本地存储用户信息
										uni.setStorageSync('business', result.data);
										//修改一下data数据
										this.business = result.data
									}
								}
							})
						}
						else
						{
							this.$refs.uToast.show({
								type: 'error',
								message: result.msg
							})
						}
					}
				});
			},
			toLogin()
			{
				this.$u.route('pages/business/login');
			},
			ToProduct()
			{
				this.$u.route('pages/business/list');
			},
			OnLogout()
			{
				this.ShowLogout = true;
			},
			OnUnbinding()
			{
				this.ShowUnbind = true
			},
			ConfirmLogout()
			{
				this.ShowLogout = false;
				this.business = {}
				// 清队存储用户信息
				uni.removeStorageSync('business');
			},
			async ConfirmUnbind()
			{
				// 关闭确认框
				this.ShowUnbind = false;

				let result = await this.$u.api.UnBind({
					id: this.business.id,
					mobile: this.business.mobile
				})
				if (result.code == 1)
				{
					this.business = {};
					// 清空用户存储的信息
					uni.removeStorageSync('business');
					this.$refs.uToast.show({
						type: 'success',
						message: result.msg,
					})
				}
				else
				{
					this.$refs.uToast.show({
						message: result.msg,
						type: 'error',
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #eee;
	}

	.container {
		width: 95%;
		margin: 0 auto;
	}

	.user {
		display: flex;
		padding: 40px;
		background-color: #fff;
		margin-top: 10px;
		border-radius: 10px;
	}

	/* #ifdef H5  */
	.user {
		align-items: center;
	}

	/* #endif */

	.user .left {
		flex: 3;
	}

	/* 条件编译 */
	/* #ifdef MP-WEIXIN  */
	.user .left {
		flex: 3;
		display: flex;
		align-items: center;
		align-content: center;
	}

	/* #endif */


	.user .right {
		flex: 1
	}

	.user .right .xcx {
		width: 200rpx;
		height: 200rpx;
		border-radius: 100%;
		overflow: hidden;
	}

	.user .left .nickname {
		font-size: 26px;
		font-weight: bold;
	}

	.actions {
		display: flex;
		padding: 20px 40rpx;
	}

	.login {
		flex: 1;
	}

	.menu {
		background-color: #fff;
		margin-top: 10px;
	}

	.menu .item {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #ccc;
		padding: 10px 10px;
		font-size: 14px;
	}

	.checkActive {
		background-color: rgba(233, 233, 233, 0.5);
	}
</style>